<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .hd {
      padding: 10px 10px;
      margin: 100px auto 0px;
      width: 210px;
      height: 40px;
      background-color: #C0C0C0;
    }

    .hd-content {
      padding: 5px;
      border: 5px solid red;
      border-color: #808080 #fff #fff #808080;
      height: 30px;
      display: flex;
      justify-content: space-between;
    }

    .hd-content .lian {
      width: 30px;
      height: 30px;
      background-image: url("./img/xiao.jpeg");
      background-size: contain;
      background-repeat: no-repeat;
    }

    .hd-content .left,
    .hd-content .right {
      width: 60px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background-color: #1A0009;
      color: #A41E2D;
    }

    .bd {
      padding: 10px 10px;
      margin: 0px auto;
      width: 210px;
      height: 210px;
      background-color: #C0C0C0;
    }

    .box {
      border: 5px solid red;
      border-color: #808080 #fff #fff #808080;
      width: 200px;
      height: 200px;
    }

    .box>div {
      box-sizing: border-box;
      border: 3px solid red;
      border-color: #fff #808080 #808080 #fff;
      background-color: #C0C0C0;
      float: left;
      width: 20px;
      height: 20px;
      background-size: contain;
    }
  </style>
</head>

<body>
  <div class="hd">
    <div class="hd-content">
      <div class="left"> 000 </div>
      <div class="lian"> </div>
      <div class="right">5:00 </div>
    </div>
  </div>
  <div class="bd">
    <div class="box">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <script>
    let showTime = function () {
      shijian++
      let sheng = zong - shijian
      if (sheng < 0) {
        alert("游戏时间到,结束")
        clearInterval(timeId)
      } else {
        let date = new Date(sheng * 1000)
        let mm = date.getMinutes()
        let ss = date.getSeconds()
        right.innerHTML = `${mm}:${ss}`
      }
    }

    let div = document.querySelector("div")
    let left = document.querySelector(".left")
    let right = document.querySelector(".right")
    // 笑脸
    let divLian = document.querySelector(".lian")
    // 0-99 个div
    // 通过下标就可以找到某个div,找到把 雷 放进去,添加上class,
    let divArr = document.querySelectorAll(".box>div")
    // 通过产生随机的下标,来生随机的雷
    // 产生0-99 的随机小数
    let j = Math.floor(Math.random() * 99);
    console.log(j);
    let boomArr = [j]
    divArr[j].className = "boom"
    // 分数 
    let fen = 0;
    let shijian = 0
    // 总秒数
    let zong = 5 * 60
    // 时间自动+1
    let timeId = setInterval(showTime, 1000);

    for (let i = 0; i < divArr.length; i++) {
      let ele = divArr[i]
      // 点击事件
      ele.onclick = function () {
        if (ele.className == "boom") {
          // 说明是炸弹,要爆炸
          ele.style.backgroundImage = "url('./img/lei.png')";
          divLian.style.backgroundImage = "url('./img/ku.jpeg')";
          ele.style.borderColor = "#A0A0A0"
          // 结束时间计时
          clearInterval(timeId)
          alert("踩到雷了,游戏结束")
        } else {
          // 每点击一次 +1
          fen++;          
          left.innerHTML = (""+fen).padStart(3,"0")
          if (fen >= 10) {
            // 结束时间计时
            clearInterval(timeId)
            alert("通关")
          }
          ele.style.backgroundColor = "#C0C0C0"
          ele.style.borderColor = "#A0A0A0"
        }
      }

    }

  </script>
</body>

</html>